<template>
  <div class="import-config-manager">
        <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <el-button type="primary" @click="openDialog()">新增配置</el-button>
          <el-popover placement="bottom-end" trigger="click" :width="320">
            <template #reference>
              <el-button style="margin-left:8px;">列显示设置</el-button>
            </template>
            <div style="max-height:320px;overflow:auto;">
              <el-checkbox-group v-model="checkedColumnKeys">
                <el-checkbox v-for="c in allColumns" :key="c.key" :label="c.key" style="display:block;margin:6px 0;">
                  {{ c.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="margin-top:8px;text-align:right;">
              <el-button size="small" text @click="selectAllColumns">全选</el-button>
              <el-button size="small" text @click="resetColumns">重置</el-button>
            </div>
          </el-popover>
          <span class="header-title">导入配置管理</span>
        </div>
      </template>
      <el-form :inline="true" :model="query" class="query-form" @submit.prevent>
        <el-form-item label="表名/表中文名称">
          <el-input v-model="query.tableName" placeholder="请输入表名或表中文名称" clearable />
        </el-form-item>
        <el-form-item label="模块名">
          <el-input v-model="query.moduleName" placeholder="请输入模块名" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="query.enableStatus" placeholder="全部" clearable style="width: 120px">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: -20px;">
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table height="calc(75vh - 140px)" :data="list" border stripe style="width: 100%" v-loading="loading" @sort-change="handleSortChange">
        <el-table-column v-if="isColVisible('index')" type="index" label="序号" width="60" align="center" />
        <el-table-column v-if="isColVisible('tableName')" prop="tableName" label="表名" min-width="120" sortable="custom" />
        <el-table-column v-if="isColVisible('tableLabel')" prop="tableLabel" label="表中文名称" min-width="120" sortable="custom" />
        <el-table-column v-if="isColVisible('moduleName')" prop="moduleName" label="模块名" min-width="100" sortable="custom" />
        <el-table-column v-if="isColVisible('subsetCode')" prop="subsetCode" label="数据子集" min-width="100" sortable="custom" />
        <el-table-column v-if="isColVisible('apiBasePath')" prop="apiBasePath" label="API路径" min-width="180" sortable="custom" />
        <el-table-column v-if="isColVisible('importModes')" prop="importModes" label="导入模式" min-width="100" sortable="custom" />
        <el-table-column v-if="isColVisible('urlAddress')" prop="urlAddress" label="URL地址" min-width="150" show-overflow-tooltip />
        <el-table-column v-if="isColVisible('jsonType')" prop="jsonType" label="源JSON" min-width="120" show-overflow-tooltip />
        <el-table-column v-if="isColVisible('jsonField')" prop="jsonField" label="目标JSON" min-width="120" show-overflow-tooltip />
        <el-table-column v-if="isColVisible('jsonTargetField')" prop="jsonTargetField" label="目标字段" min-width="120" show-overflow-tooltip />
        <el-table-column v-if="isColVisible('scheduleRule')" prop="scheduleRule" label="执行周期" min-width="120" sortable="custom">
          <template #default="{ row }">
            <el-tag>
              {{ row.scheduleRule === 'DAILY' ? '每天' : row.scheduleRule === 'WEEKLY' ? '每周' : row.scheduleRule === 'MONTHLY' ? '每月' : row.scheduleRule === 'QUARTERLY' ? '每季' : row.scheduleRule === 'ONCE' ? '一次' : row.scheduleRule || '-' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="isColVisible('generateCount')" prop="generateCount" label="生成数量" min-width="140" sortable="custom">
          <template #default="{ row }">
            <el-tag :type="row.generateCount === '0' ? 'success' : 'warning'">
              <template v-if="row.generateCount === '0'">全量</template>
              <template v-else-if="row.generateCount === '-1'">更新最近</template>
              <template v-else-if="/^\d+$/.test(row.generateCount || '')">固定 {{ row.generateCount }} 条</template>
              <template v-else-if="/^(\d+)-(\d+)$/.test(row.generateCount || '')">随机区间 {{ row.generateCount }} 条</template>
              <template v-else>—</template>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="isColVisible('autoExecuteEnabled')" prop="autoExecuteEnabled" label="自动执行" width="90" align="center" sortable="custom">
          <template #default="{ row }">
            <el-tag :type="row.autoExecuteEnabled === 1 ? 'success' : 'info'">{{ row.autoExecuteEnabled === 1 ? '开启' : '关闭' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="isColVisible('enableStatus')" prop="enableStatus" label="状态" width="80" align="center" sortable="custom">
          <template #default="{ row }">
            <el-tag :type="row.enableStatus === 1 ? 'success' : 'info'">{{ row.enableStatus === 1 ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="isColVisible('actions')" label="操作" width="340" align="center" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="openDialog(row)">编辑</el-button>
            <el-button size="small" type="success" @click="testUrlConnection(row)" v-if="row.urlAddress">测试URL</el-button>
            <el-button size="small" type="warning" @click="validateJsonConfig(row)" v-if="row.jsonType && row.jsonField">验证JSON</el-button>
            <el-button size="small" type="info" @click="fetchData(row)" v-if="row.urlAddress && row.jsonType && row.jsonField">自动获取</el-button>
            <el-button size="small" type="success" @click="handleGenerate(row)" :disabled="row.enableStatus !== 1">数据生成</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px; display: flex; justify-content: flex-end;">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[20, 50, 100, 200]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
        </el-card>

    <!-- 主配置编辑对话框 -->
    <el-dialog :model-value="dialogVisible"
     @update:model-value="val => dialogVisible = val" 
     :title="editData ? '编辑配置' : '新增配置'" width="1000px" :close-on-click-modal="false" @close="handleClose">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="110px">
        <el-row :gutter="12" style="margin-bottom: 16px;">
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="表名" prop="tableName">
              <el-input v-model="form.tableName" placeholder="请输入表名" :disabled="!!editData" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="表中文名称" prop="tableLabel">
              <el-input v-model="form.tableLabel" placeholder="请输入表中文名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="模块名" prop="moduleName">
              <el-input v-model="form.moduleName" placeholder="请输入模块名" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="数据子集" prop="subsetCode">
              <el-input v-model="form.subsetCode" placeholder="请输入数据子集代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="API路径" prop="apiBasePath">
              <el-input v-model="form.apiBasePath" placeholder="请输入API路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="导入模式" prop="importModes">
              <el-input v-model="form.importModes" placeholder='如 ["insert","upsert"]' />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="模板排除字段" prop="templateExcludeFields">
              <el-input v-model="form.templateExcludeFields" placeholder='如 ["zjsjwyxbs","xxdm"]' />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="默认值配置" prop="defaultValues">
              <el-input v-model="form.defaultValues" placeholder='如 {"xxdm":"systemSchoolCode"}' />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="URL地址" prop="urlAddress">
              <el-input v-model="form.urlAddress" placeholder="请输入自动获取数据的URL地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="24" style="margin-bottom: 16px;">
            <el-form-item label="源JSON" prop="jsonType">
              <el-input v-model="form.jsonType" type="textarea" :rows="3" placeholder='如 {"type": "array", "dataPath": "data", "itemType": "object"}' />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin-bottom: 16px;">
            <el-form-item label="目标JSON" prop="jsonField">
              <el-input v-model="form.jsonField" type="textarea" :rows="3" placeholder='如 {"schoolCode": "code", "schoolName": "name"}' />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12" style="margin-bottom: 16px;" >
            <el-form-item label="目标字段" prop="jsonTargetField">
              <el-input v-model="form.jsonTargetField" placeholder="请输入目标字段字符串" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="自动执行" prop="autoExecuteEnabled">
              <el-switch v-model="form.autoExecuteEnabled" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="执行周期" prop="scheduleRule" v-if="form.autoExecuteEnabled === 1">
              <el-radio-group v-model="form.scheduleRule">
                <el-radio-button label="DAILY">每天</el-radio-button>
                <el-radio-button label="WEEKLY">每周</el-radio-button>
                <el-radio-button label="MONTHLY">每月</el-radio-button>
                <el-radio-button label="QUARTERLY">每季</el-radio-button>
                <el-radio-button label="ONCE">一次</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 16px;">
            <el-form-item label="生成数量" prop="generateCount">
              <el-input v-model="form.generateCount" placeholder="填写 0=全量；N=固定N条；A-B=随机[A,B]条；-1=更新最近">
                <template #suffix>
                  <el-tooltip placement="top" effect="dark">
                    <template #content>
                      <div style="max-width: 320px; line-height:1.6;">
                        规则说明：
                        <div>-1：更新最近一批数据（不新增）</div>
                        <div>0：全量（按来源候选集最大条数）</div>
                        <div>N：固定 N 条</div>
                        <div>A-B：随机区间 [A,B] 条</div>
                      </div>
                    </template>
                    <span style="margin-left: 4px; color:#909399; cursor: help;">(?)</span>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12" style="margin-bottom: 16px;" >
            <el-form-item label="状态" prop="enableStatus">
              <el-switch v-model="form.enableStatus" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import {
  pageImportConfig,
  addImportConfig,
  updateImportConfig,
  deleteImportConfig,
  testUrlConnection as testUrlConnectionApi,
  validateJsonConfig as validateJsonConfigApi,
    fetchDataByTableName as fetchDataByTableNameApi,
    generateDataByTableName as generateDataByTableNameApi,
    getSystemSchoolCode,
  type ImportConfigVO
} from '@/api-data/data/data_base/common/import-config'
import { useRoute } from 'vue-router'
//
import FieldConfigManager from './components/FieldConfigManager.vue'
import MatchRuleManager from './components/MatchRuleManager.vue'
import SmartMappingTest from './components/SmartMappingTest.vue'

// 列显示设置
interface ColumnOption { key: string; label: string }
const LS_COL_KEY = 'import-config-manager.columns'
const allColumns = ref<ColumnOption[]>([
  { key: 'index', label: '序号' },
  { key: 'tableName', label: '表名' },
  { key: 'tableLabel', label: '表中文名称' },
  { key: 'moduleName', label: '模块名' },
  { key: 'subsetCode', label: '数据子集' },
  { key: 'apiBasePath', label: 'API路径' },
  { key: 'importModes', label: '导入模式' },
  { key: 'urlAddress', label: 'URL地址' },
  { key: 'jsonType', label: '源JSON' },
  { key: 'jsonField', label: '目标JSON' },
  { key: 'jsonTargetField', label: '目标字段' },
  { key: 'scheduleRule', label: '执行周期' },
  { key: 'generateCount', label: '生成数量' },
  { key: 'autoExecuteEnabled', label: '自动执行' },
  { key: 'enableStatus', label: '状态' },
  { key: 'actions', label: '操作' }
])
const checkedColumnKeys = ref<string[]>([])
const getAllKeys = () => allColumns.value.map(c => c.key)
const selectAllColumns = () => { checkedColumnKeys.value = getAllKeys() }
const defaultColumns = () => getAllKeys() // 这里默认全选，可按需调整默认列
const resetColumns = () => { checkedColumnKeys.value = defaultColumns() }
const isColVisible = (key: string) => checkedColumnKeys.value.includes(key)

// 初始化列显隐：优先使用本地存储
try {
  const raw = localStorage.getItem(LS_COL_KEY)
  if (raw) {
    const parsed = JSON.parse(raw)
    if (Array.isArray(parsed) && parsed.length > 0) checkedColumnKeys.value = parsed
  }
} catch {}
if (checkedColumnKeys.value.length === 0) {
  resetColumns()
}
watch(checkedColumnKeys, (val) => {
  try { localStorage.setItem(LS_COL_KEY, JSON.stringify(val)) } catch {}
}, { deep: true })

const query = reactive<{ tableName: string; moduleName: string; enableStatus: number | undefined; sortField?: string; sortOrder?: 'ascending'|'descending' }>({
  tableName: '',
  moduleName: '',
  enableStatus: undefined,
  sortField: undefined,
  sortOrder: undefined
})
const list = ref<ImportConfigVO[]>([])
const loading = ref(false)
const dialogVisible = ref(false)
const editData = ref<ImportConfigVO | null>(null)
const formRef = ref<FormInstance>()
const form = ref<Partial<ImportConfigVO>>({
  tableName: '',
  tableLabel: '',
  moduleName: '',
  subsetCode: '',
  apiBasePath: '',
  importModes: '',
  templateExcludeFields: '',
  defaultValues: '',
  urlAddress: '',
  jsonType: '',
  jsonField: '',
  jsonTargetField: '',
  autoExecuteEnabled: 0,
  scheduleRule: '',
  generateCount: '0',
  enableStatus: 1
})

const pageNum = ref(1)
const pageSize = ref(20)
const total = ref(0)

// Tab相关数据
const activeTab = ref('main')
const selectedTableName = ref('')

// 计算属性：获取当前选中的表名
const currentTableName = computed(() => {
  if (activeTab.value === 'main') {
    return ''
  }
  return selectedTableName.value
})

const rules = {
  tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
  tableLabel: [{ required: true, message: '请输入表中文名称', trigger: 'blur' }],
  moduleName: [{ required: true, message: '请输入模块名', trigger: 'blur' }],
  apiBasePath: [{ required: true, message: '请输入API路径', trigger: 'blur' }],
  importModes: [{ required: true, message: '请输入导入模式', trigger: 'blur' }],
  enableStatus: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const getList = async () => {
  loading.value = true
  try {
    const res = await pageImportConfig({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      tableName: query.tableName,
      moduleName: query.moduleName,
      enableStatus: query.enableStatus,
      sortField: query.sortField,
      sortOrder: query.sortOrder
    }) as any
    list.value = res.data.data.records
    total.value = res.data.data.total
  } catch (e) {
    ElMessage.error('获取配置列表失败')
  } finally {
    loading.value = false
  }
}

const resetQuery = () => {
  query.tableName = ''
  query.moduleName = ''
  query.enableStatus = undefined
  query.sortField = undefined
  query.sortOrder = undefined
  getList()
}

const openDialog = (row?: ImportConfigVO) => {
  if (row) {
    editData.value = { ...row }
    form.value = { ...row }
  } else {
    editData.value = null
      form.value = {
      tableName: '',
      tableLabel: '',
      moduleName: '',
      subsetCode: '',
      apiBasePath: '',
      importModes: '',
      templateExcludeFields: '',
      defaultValues: '',
      urlAddress: '',
      jsonType: '',
      jsonField: '',
      jsonTargetField: '',
      autoExecuteEnabled: 0,
        scheduleRule: '',
        generateCount: '0',
      enableStatus: 1
    }
  }
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleSubmit = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (!valid) return
    loading.value = true
    try {
      if (editData.value && editData.value.id) {
        await updateImportConfig(form.value)
        ElMessage.success('编辑成功')
      } else {
        await addImportConfig(form.value)
        ElMessage.success('新增成功')
      }
      dialogVisible.value = false
      getList()
    } catch (e) {
      ElMessage.error('保存失败')
    } finally {
      loading.value = false
    }
  })
}

const handleDelete = async (row: ImportConfigVO) => {
  try {
    await ElMessageBox.confirm(`确定要删除该配置吗？`, '提示', { type: 'warning' })
    await deleteImportConfig(row.id!)
    ElMessage.success('删除成功')
    getList()
  } catch (e) {
    if (e !== 'cancel') ElMessage.error('删除失败')
  }
}

const handlePageChange = (val: number) => {
  pageNum.value = val
  getList()
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageNum.value = 1
  getList()
}

// 测试URL连接
const testUrlConnection = async (row: ImportConfigVO) => {
  try {
    const res = await testUrlConnectionApi(row.urlAddress!)
    if (res.data.success) {
      ElMessage.success('URL连接测试成功')
    } else {
      ElMessage.error('URL连接测试失败')
    }
  } catch (e) {
    ElMessage.error('URL连接测试失败')
  }
}

// 验证JSON配置
const validateJsonConfig = async (row: ImportConfigVO) => {
  try {
    const res = await validateJsonConfigApi(row.jsonType!, row.jsonField!)
    if (res.data.valid) {
      ElMessage.success('JSON配置验证成功')
    } else {
      ElMessage.error('JSON配置验证失败')
    }
  } catch (e) {
    ElMessage.error('JSON配置验证失败')
  }
}

// 自动获取数据
const fetchData = async (row: ImportConfigVO) => {
  try {
    const res = await fetchDataByTableNameApi(row.tableName!)
    if (res.data.success) {
      ElMessage.success(`成功获取 ${res.data.dataCount} 条数据`)
    } else {
      ElMessage.error('自动获取数据失败')
    }
  } catch (e) {
    ElMessage.error('自动获取数据失败')
  }
}

// 触发后端数据生成
const handleGenerate = async (row: ImportConfigVO) => {
  try {
    // 若配置里已有 generateCount，则直接用配置，不再要求填写；否则允许临时覆盖输入
    let overrideCount: string | undefined
    let schoolCode: string | undefined
    if (!row.generateCount || String(row.generateCount).trim() === '') {
      const html = `<div style='text-align:left;'>
        <div style='margin-bottom:6px;'>覆盖生成数量(可选)：
          <input id='overrideCountInput' style='width:260px;padding:6px;border:1px solid #dcdfe6;border-radius:4px;' placeholder='0 或 N 或 A-B'>
        </div>
        <div>学校代码(可选)：
          <input id='schoolCodeInput' style='width:260px;padding:6px;border:1px solid #dcdfe6;border-radius:4px;' placeholder='统一学校代码'>
        </div>
      </div>`
      await ElMessageBox({
        title: '数据生成',
        message: html,
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
      })
      overrideCount = (document.getElementById('overrideCountInput') as HTMLInputElement)?.value?.trim() || undefined
      schoolCode = (document.getElementById('schoolCodeInput') as HTMLInputElement)?.value?.trim() || undefined
    }

    // 生成前自动拉取一次学校代码（统一口径）
    try {
      const s: any = await getSystemSchoolCode()
      if (s?.data?.data) schoolCode = s.data.data
    } catch {}

    await ElMessageBox.confirm(`将按配置生成数据到 data_base_${row.subsetCode?.toLowerCase()}_${row.tableName.toLowerCase()}，是否继续？`, '提示', { type: 'warning' })

    const res = await generateDataByTableNameApi(row.tableName!, { overrideCount, schoolCode }) as any
    if (res?.data?.code === 200) {
      const data = res?.data?.data || {}
      const count = data.generatedCount ?? '-'
      const targetTable = data.targetTableName || `data_base_${row.subsetCode?.toLowerCase()}_${row.tableName.toLowerCase()}`
      const rule = data.useCountRule ?? (row.generateCount || '-')
      const scShow = schoolCode || '-'
      await ElMessageBox.alert(
        `<div style='text-align:left;line-height:1.9;'>`
        + `<div><b>生成结果：</b>成功新增 ${count} 条</div>`
        + `<div><b>目标表：</b>${targetTable}</div>`
        + `<div><b>数量规则：</b>${rule}</div>`
        + `<div><b>学校代码：</b>${scShow}</div>`
        + `</div>`,
        '生成完成',
        { dangerouslyUseHTMLString: true }
      )
    } else {
      ElMessage.error(res?.data?.message || '生成失败')
    }
  } catch (e) {
    if (e !== 'cancel') ElMessage.error('生成失败')
  }
}

// 处理选择表进行字段配置
const handleSelectTable = (row: ImportConfigVO) => {
  selectedTableName.value = row.tableName
  activeTab.value = 'fields'
  ElMessage.success(`已选择表：${row.tableLabel}`)
}

const route = useRoute()
watch(
  () => route.fullPath,
  () => {
    getList()
  }
)

onMounted(getList)

// 调度选择已简化为枚举（DAILY/WEEKLY/MONTHLY/QUARTERLY/ONCE），不再生成 Cron

// 表格排序
function handleSortChange(param: { prop: string; order: 'ascending' | 'descending' | null }) {
  query.sortField = param.order ? param.prop : undefined
  query.sortOrder = (param.order || undefined) as any
  pageNum.value = 1
  getList()
}
</script>

<style lang="scss" scoped>
.import-config-manager {
  .config-card {
    margin-bottom: 20px;
    .card-header {
      display: flex;
      align-items: center;
      position: relative;
      min-height: 48px;
    }
    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 0 auto;
      position: absolute;
      left: 0; right: 0;
      text-align: center;
      pointer-events: none;
    }
    .card-header > .el-button {
      z-index: 1;
    }
    .query-form {
      margin-bottom: 20px;
    }
  }
}
</style> 